<template>
	<view class="mygz">
		<headertop title="我的关注" str1="oridei" :back1="back1"></headertop>
		<view class="mygzback">

		</view>
		<view :style="{'margin-top':statusBarHeight+'px','height':barHeight+'px'}"></view>
		<view class="centerContent">
			<view class="haedrtop">
				<view class="text">
					全部关注({{total}})
				</view>
				<view class="text" v-if="total">
					<span @click="qiehuan"> {{flag?'取消收藏':'编辑'}}</span> <span v-if="flag" @click="flag=!flag" style="margin-left: 30rpx;
    color: red;">退出编辑</span>
				</view>
			</view>
			<view class="contentList">
				<view class="msgicon" v-if="!list.length">
					<image :src="_static('https://jingwei.xunfuzhifuzaixian.com/static/images/wxnone.png')"
						mode="widthFix">
					</image>
					<view class="msgtext">
						暂无关注
					</view>
				</view>
				<view class="itembox" v-for="item in list" :key="item.id" @click="gopage(item.hid)">
					<image :src="item['hose']['image']" class="leftimg" mode=""></image>
					<view class="righttexts">
						<view class="topline">
							<view class="title">{{item['hose']['title']}}</view>
							<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/微信图片_20250806111541.png"
								class="iconxin" mode="" v-if="!flag"></image>
							<image
								:src="item.bool?'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Group 11469@2x (1).png':'https://chunchi.oss-cn-beijing.aliyuncs.com/static/Ellipse 2226@2x.png'"
								@click.stop="item.bool=!item.bool" class="iconxin" v-if="flag" mode=""></image>

						</view>
						<view class="mshu">
							{{item['hose']['detail']}}
						</view>
						<view class="btnss">
							<view class="btn" v-for="(ite,ind) in item['hose']['product']" :key="ind">
								{{ite}}
							</view>
						</view>
						<view class="daaressline">
							<image src="https://jingwei.xunfuzhifuzaixian.com/static/images/Frame@2x(2).png" mode="">
							</image>
							<view class="addresst">{{item['hose']['address']}}</view>
						</view>
						<view class="jiageline">
							{{item['hose']['mianji']}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		_static
	} from '@/ulm/utils/url.js'
	import headertop from '@/components/header.vue'
	import {
		ref,
		onMounted,
		reactive,
	} from 'vue'
	const back1 = ref('')
	const barHeight = ref('')
	const statusBarHeight = ref('')
	const list = ref([])
	const flag = ref(false)
	const query = reactive({
		page: 1,
		limit: 10
	})
	import ulm, {
		$api
	} from '@/ulm';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	const total = ref(0)
	onLoad(() => {
		initlist()
	})
	async function qxsc() {

	}
	async function initlist() {
		const res = await $api.likelist(query)
		if (res.code == 1) {
			total.value = res.data.count
			list.value.push(...res.data.list)
			for (var i in list.value) {
				list.value[i]['bool'] = false
			}
		}
	}
	onReachBottom(() => {
		if (total.value > list.value.length) {
			query['page']++
			initlist()
		}
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})

	function gopage(id) {
		uni.navigateTo({
			url: '/sub_index/index/xmdetail?id=' + id
		})
	}
	async function qiehuan() {
		if (!flag.value) {
			flag.value = !flag.value
		} else {
			var arr = list.value.filter(item => item.bool)
			if (!arr.length) {
				uni.showToast({
					title: '请选择后取消',
					icon: 'none'
				})
				return
			}
			var ids = arr.map(item => item.hid)
			const res = await $api.deletelike({
				id: ids.join()
			})
			if (res.code == 1) {
				setTimeout(() => {
					uni.showToast({
						title: '取消收藏成功'
					})
				}, 500)
				query.page = 1
				list.value = []
				flag.value = false
				initlist()
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: 30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.mygz {
		width: 100%;
		overflow: hidden;
		position: relative;

		.centerContent {
			width: 686rpx;
			margin: auto;
			margin-top: 28rpx;
			overflow: hidden;

			.contentList {
				width: 100%;
				overflow: hidden;
				margin-top: 24rpx;

				.itembox {
					width: 100%;
					background: #FFFFFF;
					padding: 20rpx 0;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					overflow: hidden;
					margin-bottom: 28rpx;
					display: flex;
					align-items: center;

					.leftimg {
						width: 200rpx;
						height: 200rpx;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						margin-left: 20rpx;
					}

					.righttexts {
						width: 424rpx;
						margin-left: 16rpx;
						overflow: hidden;

						.jiageline {
							width: 100%;
							display: flex;
							justify-content: flex-end;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #F53F3F;
						}

						.daaressline {
							width: 100%;
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;

							.addresst {
								display: -webkit-box;
								/* 必须设置，用于多行溢出 */
								-webkit-box-orient: vertical;
								/* 设置盒子排列方向为垂直 */
								-webkit-line-clamp: 2;
								/* 限制显示的行数，例如显示 3 行 */
								overflow: hidden;
								/* 隐藏超出的内容 */
								width: 400rpx;
							}

							image {
								width: 20rpx;
								height: 20rpx;
							}
						}

						.btnss {
							width: 100%;
							display: flex;
							align-items: center;
							margin-bottom: 12rpx;

							.btn {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #FF7D00;
								background: #FFF7E8;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								padding: 0 18rpx;
								margin-right: 16rpx;
							}
						}

						.mshu {
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 26rpx;
							color: #4E5969;
							margin-bottom: 12rpx;
						}

						.topline {
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 12rpx;

							.title {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #1D2129;
								width: 300rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							.iconxin {
								width: 36rpx;
								height: 36rpx;
							}
						}
					}
				}

			}

			.haedrtop {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
				}
			}
		}

		.mygzback {
			width: 100%;
			height: 278rpx;
			background: linear-gradient(180deg, #53ACFF 1%, rgba(133, 204, 251, 0) 100%);
			position: absolute;
			z-index: -1;
		}
	}
</style>